<!--实现二级菜单-->
<script setup>

import GoodsItem from "@/views/mainPage/home/components/GoodsItem.vue";
import {useRoute} from "vue-router";

import {onMounted, ref} from "vue";
import {getCategoryById} from "@/apis/brand.js";
import usePageItemList from "@/composables/useItemList.js"


const route = useRoute();

// 通过路由地址id获取brand
const brand = ref({});

const getBrandById = async () => {

  const res = await getCategoryById(route.params.id);

  if (res && res.data) {
    brand.value = res.data;
  } else {
    console.error('Failed to fetch brand data or unexpected response format.');
  }
}
onMounted(() => getBrandById());
// 通过brand获取brand下的所有item

const {itemList,fetchPageItemList} = usePageItemList()
// fetchItemList(route.params.id);
const pageData  = ref({
  page: 1,
  size: 20,
  searchAndOrder:{

  }
})
// 构建请求的搜索条件对象
const searchAndOrder = {
  search: {
    brandId: route.params.id // 使用路由参数作为搜索条件
  },

};

fetchPageItemList(pageData.value.page, pageData.value.size, searchAndOrder);
console.log(itemList)



</script>

<template>
  <div class="container ">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/product' }">回收</el-breadcrumb-item>
        <el-breadcrumb-item>{{ brand.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--    item内容 -->
    <div class="sub-container">
      <div class="body" >
        <GoodsItem v-for="item in itemList" :key="item.id" :item="item"></GoodsItem>

      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>

.bread-container {
  padding: 25px 0;
  color: #666;
}

.sub-container {
  padding: 20px 10px;
  background-color: #fff;

  .body {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .goods-item {
    display: block;
    width: 220px;
    margin-right: 20px;
    padding: 20px 30px;
    text-align: center;

    img {
      width: 160px;
      height: 160px;
    }

    p {
      padding-top: 10px;
    }

    .name {
      font-size: 16px;
    }

    .desc {
      color: #999;
      height: 29px;
    }

    .price {
      color: $priceColor;
      font-size: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }


}
</style>